<!-- 查看历史快照 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" :showBack="true"> </PageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <div>
          <h3>
            {{ dayjs(snapData.data?.createdAt).format('YYYY-MM-DD') }}
            历史快照
          </h3>
          <a-space style="color: #000">
            <div>归档人：{{ humanDetail?.name }}</div>
            <div>
              归档时间：{{
                dayjs(snapData.data?.createdAt).format('YYYY-MM-DD HH:mm:ss')
              }}
            </div>
          </a-space>
        </div>
      </template>
    </ConditionBox>
    <a-tabs v-model:active-key="currTab">
      <a-tab-pane key="1" title="组织机构">
        <Structure :data="snapData.data?.organization" />
      </a-tab-pane>
      <a-tab-pane key="2" title="组织架构图">
        <StructurePic v-model:id="currId" :data="snapData.data?.organization" />
      </a-tab-pane>
    </a-tabs>
    <!-- <ConditionBox :margin-bottom="20">
      <template #left>
        <a-space style="margin-bottom;: 20px">
          <a-range-picker
            @change="onChange"
            @select="onSelect"
            style="width: 254px; margin-bottom: 20px"
            showTime
          />
        </a-space>
      </template>
    </ConditionBox> -->
  </ContentCard>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { GetSnapShotListDetail } from '@/apis/management/organization/organizationManagement';
import Structure from '../Structure/index.vue';
import StructurePic from '../StructurePic/index.vue';
import mitter from '@/utils/mitt';
import { getHumanDetail } from '@/utils/common';

const route = useRoute();

const id = +route.params.id;

const title = '历史快照详情';

let currTab = ref(route.query.tab); // 当前选中的tab
let currId = ref(0); // 当前选中的id
watchEffect(() => {
  mitter.on('changeStructure', (id: any) => {
    if (id) {
      currId.value = id;
      currTab.value = '2';
    }
  });
});

const snapData = reactive({
  data: []
});

let humanDetail = ref({});
// 获取表格数据
const getData = async () => {
  try {
    const detailRes = await GetSnapShotListDetail({
      id
    });
    snapData.data = detailRes;

    humanDetail.value = await getHumanDetail(detailRes.createBy);
    console.log('=========humanDetail===========================');
    console.log(humanDetail.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};

getData();
</script>

<style lang="less" scoped>
.container {
  padding: 10px 20px;
}
</style>
